<html>
  <head>
    <title>Filter Color Hue</title>
    <style>
      #original {
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      #custom {
        display: inline-block;
        background: #2793e6;
        width: 15px;
        height: 15px;
      }
    </style>
    <script>
    (function(){
      function tintImage(url, rgba, callback) {
        function onerror() {
          throw "Couldn't load image!";
        }
        function onload() {
          canvas.width = img.width;
          canvas.height = img.height;
          
          ctx.clearRect(0, 0, img.width, img.height);
          ctx.drawImage(img, 0, 0, img.width, img.height);
          
          var imageData = ctx.getImageData(0, 0, img.width, img.height);
          var idx, i, pixel;
          for (i = (img.width * img.height); i >= 0; --i) {
            idx = i << 2;
            pixel = {r: imageData.data[idx], g: imageData.data[idx + 1], b: imageData.data[idx + 2]};
            
            imageData.data[idx] = (rgba.a * rgba.r + (1 - rgba.a) * pixel.r);
            imageData.data[idx + 1] = (rgba.a * rgba.g + (1 - rgba.a) * pixel.g);
            imageData.data[idx + 2] = (rgba.a * rgba.b + (1 - rgba.a) * pixel.b);
          }
          ctx.putImageData(imageData, 0, 0);
          
          callback(canvas);
        }
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        
        var img = new Image();
        img.src = url;
        img.onload = onload;
        img.onerror = onerror;
      }
      window.tintImage = tintImage;
    })();
  </script>
  </head>
  <body>
    <div>
      Result -> <span id="original"></span>
    </div>
    <div>
      Desired result -> <span id="custom"></span>
    </div>
    <div>
      <label for="r">Red <input id="r" type="text" value="85" /></label>
      <label for="g">Green <input id="g" type="text" value="153" /></label>
      <label for="b">Blue <input id="b" type="text" value="0" /></label>
      <button id="submit">Submit</button>
    </div>
    <div>
      <label for="h">Hue <input id="h" type="text" value="" disabled /></label>
      <label for="s">Saturation <input id="s" type="text" value="" disabled /></label>
      <label for="v">Value <input id="v" type="text" value="" disabled /></label>
    </div>
    <script>
      function setStyles(el, styles){
        var key;
        for (key in styles) {
          if (styles.hasOwnProperty(key)) {
            el.style.setProperty(key, styles[key])
          }
        }
      }
      function colorToHex(red, green, blue){
        red = Math.round(red);
        green = Math.round(green);
        blue = Math.round(blue);
        if (red > 255) red = 255;
        if (red < 0) red = 0;
        if (green > 255) green = 255;
        if (green < 0) green = 0;
        if (blue > 255) blue = 255;
        if (blue < 0) blue = 0;
        var r = red.toString(16);
        if (r.length === 1) r = "0" + r;
        var g = green.toString(16);
        if (g.length === 1) g = "0" + g;
        var b = blue.toString(16);
        if (b.length === 1) b = "0" + b;
        r = r.toUpperCase();
        g = g.toUpperCase();
        b = b.toUpperCase();
        return "#" + r + g + b;
      }
      
      //var img = "";
      var img = "";
      document.getElementById("submit").addEventListener("click", function(){
        var r = parseInt(document.getElementById("r").value, 10);
        var g = parseInt(document.getElementById("g").value, 10);
        var b = parseInt(document.getElementById("b").value, 10);
        
        setStyles(document.getElementById("custom"), {
          "background": colorToHex(r, g, b)
        });
        tintImage(img, { r: r, g: g, b: b, a: 1 }, function(ctx){
          document.getElementById("original").style.background = "url(" + ctx.toDataURL() + ")";
        });
      }, false);
    </script>
  </body>
</html>